<template>
  <div ref="refDom" class="map-con">
    <div id="mapChart" />
  </div>
</template>

<script>
import {
  watch,
  computed,
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted,
} from "vue";

const { echarts: myEcharts } = window;

export default defineComponent({
  components: {},
  props: {
    propValue: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "订单数量",
    },
  },
  setup(props, { emit }) {
    // data
    const state = reactive({
      list: [],
    });

    let myChart = null;
    const option = {
      tooltip: {
        trigger: "item",
        // eslint-disable-next-line consistent-return
        formatter(params) {
          const arr = [];
          for (let j = 0; j < 2; j++) {
            const oa = option.series[j].data;
            for (let i = 0; i < oa.length; i++) {
              if (
                oa[i] &&
                params.data &&
                params.data.name == oa[i].name &&
                oa[i].name.value != "undefined"
              ) {
                arr.push({
                  seriesName: option.series[j].name,
                  name: oa[i].name,
                  value: oa[i].value,
                });
              }
            }
            if (j == 1 && arr != "null" && arr.length != 0) {
              let str = `${arr[0].name}    `;
              for (var k = 0; k < arr.length; k++) {
                str += `${arr[k].seriesName}:${arr[k].value}`;
              }
              if (k == arr.length) {
                return str;
              }
            }
          }
        },
      },
      visualMap: {
        textStyle: {
          color: "#fff",
        },
        min: 0,
        max: 20,
        left: "center",
        top: "bottom",
        orient: "horizontal",
        text: ["最高", "最低"], // 文本，默认为数值文本
        calculable: false,
        color: ["#5565FF", "#EFF5FF"],
      },
      geo: {
        map: "china",
        type: "map",
        roam: false,
        itemStyle: {
          normal: {
            areaColor: "#5a69ea",
            shadowColor: "#5a69ea",
            shadowOffsetX: 0,
            shadowOffsetY: 6,
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 0,
            color: "green",
            label: {
              show: false,
            },
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              normal: {
                // 隐藏地图
                opacity: 0, // 为 0 时不绘制该图形
              },
            },
            label: {
              show: false, // 隐藏文字
            },
          },
        ],
      },
      series: [
        {
          name: "订单数量",
          type: "map",
          mapType: "china",
          roam: false,
          itemStyle: {
            emphasis: {
              areaColor: "#76C9FF",
            },

            normal: {
              areaColor: "#f1f9fe",
              shadowColor: "#5a69ea",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
            },
          },
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          data: [],
        },
        {
          name: "3D",
          type: "map",
          mapType: "china",
          itemStyle: {
            normal: {
              areaColor: "#f1f9fe",
              shadowColor: "#5a69ea",
              shadowOffsetX: 0,
              shadowOffsetY: 6,
            },
          },
          label: {
            normal: {
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          data: [],
        },
      ],
    };

    const initMap = () => {
      myChart = myEcharts.init(document.getElementById("mapChart"));
      option.series[0].name = props.title;
      option.series[0].data = [
        ...props.propValue,
        // {
        //   name: "西藏",
        //   value: 7,
        // },
        // {
        //   province: "江苏",
        //   totalNum: 1,
        // },
        // {
        //   name: "北京",
        //   value: 1,
        // },
      ];
      option.visualMap.max = 900;
      myChart.setOption(option, true);
    };
    // methods
    const retMethods = {};
    const refresh = () => {
      option.series[0].data = [...props.propValue];
      myChart.setOption(option);
    };

    // mounted
    onMounted(() => {
      // console.log(props.propValue,'00000000')
      initMap();

      // homeSever.getProjectDistribution().then(r => {
      //   option.series[0].data = r.map(i => ({
      //     name: i.province,
      //     value: i.totalNum
      //   }))
      //   const sort = r.sort((a, b) => b.totalNum - a.totalNum)
      //   option.visualMap.max = (sort[0].totalNum/0.9).toFixed(0)
      //   myChart.setOption(option, true)
      // }).catch(e => console.log(e))
    });

    watch(
      () => props.propValue,
      () => {
        refresh();
      }
    );
    return {
      ...toRefs(state),
      ...retMethods,
      refresh,
    };
  },
});
</script>

<style scoped lang="less">
.map-con {
  height: 100%;
  position: relative;
  #mapChart {
    width: 70%;
    height: 100%;
  }
}
</style>
